import React, { Component} from 'react'
import { Table, Button, Space, Input, Popconfirm, Modal} from 'antd';
import Highlighter from 'react-highlight-words';
import { SearchOutlined, QuestionCircleOutlined, CloseCircleOutlined, FormOutlined} from '@ant-design/icons';
import { delgonggaooneAjax, QueryNurse } from '../../utils/api';
import user from "../../mobx/userinfo";
import Demo from './Demo';
import { observer } from "mobx-react"

@observer
class Nursehas extends Component {
    componentDidMount() {
        QueryNurse().then(res => {
            this.setState({
                data: res.result
            })
        })
    }
    state = {
        list: null,
        item: {},
        filteredInfo: null,
        sortedInfo: null,
        data: []
    };
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    };

    clearFilters = () => {
        this.setState({ filteredInfo: null });
    };

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    };

    setAgeSort = () => {
        this.setState({
            sortedInfo: {
                order: 'descend',
                columnKey: 'age',
            },
        });
    };
    // 搜索
    getColumnSearchProps = dataIndex => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={node => {
                        this.searchInput = node;
                    }}
                    placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{ width: 188, marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        搜索
              </Button>
                    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        取消
              </Button>
                </Space>
            </div>
        ),
        filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value, record) =>
            record[dataIndex]
                ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
                : '',
        onFilterDropdownVisibleChange: visible => {
            if (visible) {
                setTimeout(() => this.searchInput.select(), 100);
            }
        },
        render: text =>
            this.state.searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[this.state.searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                    text
                ),
    });
    handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex,
        });
    };
    handleReset = clearFilters => {
        clearFilters();
        this.setState({ searchText: '' });
    };


    //删除
    handleDelete = (item) => {
        delgonggaooneAjax({
            _id: item._id
        }).then(res => {
            if (res.type) {
                QueryNurse().then(res => {
                    this.setState({
                        data: res.result
                    })
                })
            }
        })
    }

    //查看
    showModal = (item) => {
        user.getVisible(true)
        this.setState({
            item
        })
    }
    handleOk = () => {
        user.getVisible(false)
    }

    handleCancel = () => {
        user.getVisible(false)
    }
    // =========================================================================
    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
                filteredValue: filteredInfo.name || null,
                onFilter: (value, record) => record.name.includes(value),
                sorter: (a, b) => a.name.length - b.name.length,
                sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
                ellipsis: true,
                ...this.getColumnSearchProps('name'),
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
                sorter: (a, b) => a.age - b.age,
                sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
                ellipsis: true,
            },
            {
                title: '家庭住址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
            },
            {
                title: '电话号码',
                dataIndex: 'phone',
                key: 'phone',
            },
            {
                title: '个人专业',
                dataIndex: 'profession',
                key: 'profession',
            },
            {
                title: '科室',
                dataIndex: 'office',
                key: 'office',
                ...this.getColumnSearchProps('office'),
            },
            {
                title: '学历',
                dataIndex: 'education',
                key: 'education',
            },
            {
                title: '就职日期',
                dataIndex: 'date',
                key: 'date',
            },
            {
                key: "x",
                title: "操作",
                align: 'center',
                render: (item, recode, index) => {
                    return (
                        <p style={{ display: 'flex', justifyContent: "space-around" }}>
                            <Popconfirm
                                title="请确认后再删除!"
                                okText="确定"
                                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
                                onConfirm={() => this.handleDelete(item)}
                            >
                                <Button type="danger" size="small" shape="circle" icon={<CloseCircleOutlined />}  ></Button>
                            </Popconfirm>
                            <Button type="primary" onClick={() => this.showModal(item)} size="small" shape="circle" icon={<FormOutlined />}  ></Button>
                        </p>
                    )
                },
            },

        ];
        const { item } = this.state;
        return (
            <div>
                <Space style={{ marginBottom: 16 }}>
                    <Button onClick={this.setAgeSort}>Sort age</Button>
                    <Button onClick={this.clearAll}>Clear filters and sorters</Button>
                </Space>

                <Table columns={columns} rowKey={(item) => (item._id)} dataSource={user.Listdemo ? user.Listdemo : this.state.data} onChange={this.handleChange} />

                <Modal
                    title="修改个人信息"
                    visible={user.visible}
                    closable={false}
                    footer={null}
                    maskStyle={{ opacity: "0.2" }}
                >
                    <Demo list={item} />
                </Modal>
            </div>
        )
    }
}
export default Nursehas